<template>
  <div class="news_content">
    <div class="top">
      <div class="inputBackground">
        <input type="text" class="Inputsrech"> <button class="typeButton">搜索</button>
      </div>
     <div class="TopFlex">
        <div style="margin-right:40px">
        文档类别：
      </div>
      <div v-for="(list,index) in leibie" :key="index" class="contentList">
       <a href="#" @click="details(list,index)" :class="{active:index == activeIndex}"> {{list}}</a>
      </div>
     </div>
     <div class="TopFlex">
        <div style="margin-right:40px">
        所属类别：
      </div>
      <div v-for="(list,index) in leibie2" :key="index" class="contentList">
        <a href="#"  @click="details2(list,index)" :class="{active:index == activeIndex2}"> {{list}}</a>
      </div>
     </div>
     <div class="TopFlex">
        <div style="margin-right:40px">
        出版形式：
      </div>
      <div v-for="(list,index) in leibie3" :key="index" class="contentList">
        <a href="#"  @click="details3(list,index)" :class="{active:index == activeIndex3}"> {{list}}</a>
      </div>
     </div>
    </div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index" class="FlexImg">
       <a href="#" @click="jump">
          <img :src="item.url" alt="" />
       </a>
        <div>
          {{ item.name }}
        </div>
        <div>点击了 {{ item.content }}</div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="totalNum"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
    <!-- <button @click="jump">详情</button> -->
  </div>
</template>



<script>
export default {
  name: "zc",
  data() {
    return {
      id: "",
      tableData: [], //数据
      currentPage: 1, //默认显示第一页
      pageSize: 5, //默认每页显示5条
      totalNum: 9,
      activeIndex:0,
      activeIndex2:0,
      activeIndex3:0,
      leibie:['不限','图谱','文档','检索表'],
      leibie2:['不限','线虫','线苗','综合','其他'],
      leibie3:['不限','图书','标准','期刊','其他'],
      list: [
        {
          id: 1,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "20",
          name: "新华字典",
        },
        {
          id: 2,
          url: "https://img0.baidu.com/it/u=1051577226,2771334401&fm=26&fmt=auto",
          content: "15",
          name: "新华字典",
        },
        {
          id: 3,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1Z9291J4442Y1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644049584&t=9e937f6f4a22d84d56d382434de4b792",
          content: "14",
          name: "新华字典",
        },
        {
          id: 4,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "28",
          name: "新华字典",
        },
        {
          id: 5,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "55",
          name: "新华字典",
        },
        {
          id: 6,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "新华字典",
        },
        {
          id: 8,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "14",
          name: "新华字典",
        },
        {
          id: 9,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 10,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 11,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 12,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 13,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644046093&t=d8d66b2a1db1fe896741665b0becef96",
          content: "22",
          name: "摩登时代",
        },
      ],
      list2: [
        {
          id: 1,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "20",
          name: "新华字典",
        },
        {
          id: 2,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "15",
          name: "新华字典",
        },
        {
          id: 3,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "14",
          name: "新华字典",
        },
        {
          id: 4,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "28",
          name: "新华字典",
        },
        {
          id: 5,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "55",
          name: "新华字典",
        },
        {
          id: 6,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "22",
          name: "新华字典",
        },
        {
          id: 8,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "14",
          name: "新华字典",
        },
        {
          id: 9,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 10,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "22",
          name: "摩登时代",
        },
        {
          id: 11,
          url: "https://img1.baidu.com/it/u=3503576644,3643839059&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          content: "22",
          name: "摩登时代",
        },
      ],
      list3:[]
    };
  },
  mounted() {
    this.list3 = JSON.parse(JSON.stringify(this.list));
  },
  methods: {
    jump() {
      this.$router.push("/List");
    },
    details(list,index){
      console.log(list);
      console.log(index);
      this.activeIndex = index
    },
    details2(list,index){
      this.activeIndex2 = index
    },
    details3(list,index){
      this.activeIndex3 = index
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val; //动态改变
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val; //动态改变
      if (val == 2) {
        var list2 = JSON.parse(JSON.stringify(this.list2));
        var list = JSON.parse(JSON.stringify(this.list));
        this.list = list2;
      } else {
        this.list = this.list3;
      }
    },
  },
};
</script>
<style lang='scss' scpoed>
.news_content {
  padding: 15px 15px 15px 15px;
  height: 100%;
}
img {
  width: 200px;
  height: 200px;
}
.content {
  display: flex;
  flex-wrap: wrap;
  height: auto !important;
}
.FlexImg {
  margin-right: 40px;
  height: 250px !important;
}
.block {
  margin-left: 80%;
}
.TopFlex{
  display: flex;
  margin-bottom: 10px;
}
.contentList{
  margin-right: 50px;
}
.contentList a{
  color: #000000;
}
.top{
  width: 100%;
  border-bottom: 3px solid #0d42c3;
}
.Inputsrech{
  border: 1px solid #0d42c3;
}
// .inputBackground{
//   background: #0d42c3;
//   color: #ffffff;
// }
.typeButton{
  border: none;
  background: #0d42c3;
  color: #ffffff;
  height: 25px;
  margin-bottom: 24px;
  margin-left: 5px;
}
.active{
  color: #ffffff !important;
  background: #0d42c3;
  padding: 3px 2px;
}
</style>